<template>
  <div class="container">
    <vue-seamless-scroll :data="listData" class="warp" class-option="step:0.5">
      <ul class="item">
        <li v-for="(i,index) in listData" :key="index">
          <div class="item-one">
            <div class="index">{{ index + 1 }}</div>
            <div class="materialName">物料:<span class="materialName-font">{{i.materialName}}</span></div>
            <div class="totalInventory">当前库存:<span>{{i.totalInventory}}</span></div>
            <div class="status">{{ i.minInventory < i.totalInventory ? "正常" : "不足" }}</div>
          </div>
          <div class="item-two">
            <div class="warehouseName">仓库:<span>{{i.warehouseName}}</span></div>
          </div>
          <div class="mounted"><span>-------------------------------------------------------------</span></div>
        </li>
      </ul>
    </vue-seamless-scroll>
  </div>
</template>

<script>
import { currentGET } from "api";
import vueSeamlessScroll from "vue-seamless-scroll";
export default {
  components: {
    vueSeamlessScroll
  },
  data() {
    return {
      listData: []
    };
  },
  created() {
    currentGET("big3").then(res => {
      this.listData = res.rows;
    });
  }
};
</script>

<style lang="scss" scoped>
.container {
  width: 550px;
  height: 80%; /* 根据父级高度自适应 */
  min-height: 300px; /* 最小高度保证显示 */
}
.item-one{
  display: flex;
  justify-content: space-around;
  margin-left: 0;
  margin-right: 50px;
  margin-bottom: 10px;
}
.item-two{
  margin-left: 100px;
  margin-bottom: 10px;
}
.warp{
  width: 500px;
  height: 250px;
  margin: 0 auto;
  overflow: hidden;
}
.mounted{
  color: #0995e1;
}
.materialName-font{
  color: #0995e1;
  font-weight: bolder;
  margin-left: 5px;
}
</style>